<template>
    <div>
        <!--轮播图区域-->
        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
        <!--九宫格 到 六宫格 的改造工程-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/newslist">
                <span class="fa fa-hacker-news fa-3x"></span>
                <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/photolist">
                <span class="fa fa-picture-o fa-3x"></span>
                <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/goodslist">
                <span class="fa fa-shopping-cart fa-3x"></span>
                <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="fa fa-language fa-3x"></span>
                <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="fa fa-video-camera fa-3x"></span>
                <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="fa fa-phone fa-3x"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">联系我们</div></a></li>
        </ul>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import swiper from '../subcomponents/swiper.vue'

    //引用轮播图
    import lunbo1 from '../../images/503d269759ee3d6d862ae9fd45166d224f4ade1c.jpg'
    import lunbo2 from '../../images/96096-523440.jpg'
    import lunbo3 from '../../images/mid_929d21ed4025fc8.jpg'
    import lunbo4 from '../../images/0002.jpg'

    export default {
        data(){
            return{
                lunbotuList:[{url:1 , img:lunbo1},
                    {url:2 ,img:lunbo2},
                    {url:3 ,img:lunbo3},
                    {url:4 ,img:lunbo4},
                ],     //保存轮播图数组
            }
        },
        created(){
          this.getLunbotu();
        },
        methods:{
            getLunbotu(){       //获取轮播图数据的方法
                this.$http.get('api/getlunbo').then(result => {
                    if(result.body.status === 0){
                        this.lunbotuList = result.body.message;     //获取成功的
                        Toast('加载轮播图成功');
                    }else{
                        Toast('加载轮播图失败');
                        //获取失败
                    }
                })
            }
        },
        components:{
            swiper
        }
    }
</script>

<style lang="scss" scoped>
    .mui-grid-view.mui-grid-9{
        background-color: white;
        border: none;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
    }

    .fa{
        color: lightpink;
    }
</style>